/* =========================================================
   GLOBAL VARIABLES
   ========================================================= */

:root {
    --black: #050505;
    --red: #e2bb4c;
    --blue: #0066b3;
    --text: #151515;
    --muted: #666;
    --border: #ddd;
    --max: 1440px;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: #fff;
}


/* =========================================================
   HEADER
   ========================================================= */

.header {

    height: 82px;

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    color: white;

    background: transparent;
}

.header-inner {

    max-width: var(--max);

    height: 100%;

    margin: auto;

    padding: 0 32px;

    display: flex;

    align-items: center;
}


/* =========================================================
   FULL HEADER HOVER - EXXONMOBIL-STYLE
   Hover anywhere over the header (logo, navigation or social icons)
   to activate one continuous white header.
   ========================================================= */

.header {
    transition: background-color .25s ease, color .25s ease;
}

/* The complete header becomes white as one single area. */
.header:hover {
    background: #fff;
    color: #111;
}

/* Logo section participates in the same white header. */
.header:hover .logo {
    color: #111;
}

/* Main navigation becomes black on the white header. */
.header:hover .nav-link {
    color: #111;
}

.header:hover .nav-link .chevron {
    color: #111;
}

/* Keep the selected/hovered menu styling. */
.header:hover .nav-item:hover > .nav-link,
.header:hover .nav-item.open > .nav-link {
    background: #fff;
    color: #111;
}

/* Social icons become red when the complete header is white. */
.header:hover .social-links a {
    color: var(--red);
    border-color: var(--red);
    background: transparent;
}

.header:hover .social-links a:hover {
    color: #fff;
    background: var(--red);
    border-color: var(--red);
}

/* Mega menus remain part of the same white header experience. */
.header:hover .mega {
    color: #111;
}

/* =========================================================
   LOGO
   ========================================================= */

.logo {

    width: 190px;

    color: white;

    text-decoration: none;

    font-size: 25px;

    font-weight: 800;

    letter-spacing: -1.5px;

    flex-shrink: 0;
}

.site-logo {
    height: 62px;
    width: auto;
    max-width: 220px;
    display: block;
    object-fit: contain;
}

.logo-main {
    display: block;
}

.logo-line {

    display: flex;

    height: 4px;

    margin-top: 4px;
}

.logo-line span:nth-child(1) {
    width: 30%;
    background: #e31837;
}

.logo-line span:nth-child(2) {
    width: 30%;
    background: #f5b400;
}

.logo-line span:nth-child(3) {
    width: 40%;
    background: #0066b3;
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.nav {

    height: 100%;

    margin-left: 38px;

    margin-right: auto;

    display: flex;

    align-items: stretch;
}

.nav-item {

    position: relative;

    height: 100%;
}

.nav-link {

    height: 100%;

    padding: 0 20px;

    display: flex;

    align-items: center;

    gap: 7px;

    color: white;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    border-bottom: none;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;
}


/* White menu on hover */

.nav-item:hover > .nav-link,
.nav-item.open > .nav-link {

    background: #fff;

    color: #111;

}

.nav-item:hover > .nav-link .chevron,
.nav-item.open > .nav-link .chevron {
    color: #111;
}

.nav-item:hover .chevron,
.nav-item.open .chevron {
    transform: rotate(180deg);
}

.chevron {

    font-size: 10px;

    transition: transform .2s ease, color .2s ease;
}


/* =========================================================
   MEGA MENUS
   ========================================================= */

.mega {

    position: absolute;

    top: 82px;

    left: 0;

    width: min(900px, 90vw);

    padding: 38px;

    background: white;

    transform:
        translateY(12px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);

    transition: .2s;

    color: #111;
}

.nav-item:hover .mega {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0);
}

.mega-layout {

    display: grid;

    grid-template-columns:
        220px 1fr;

    gap: 40px;
}

.mega-intro {

    border-right: 1px solid var(--border);

    padding-right: 30px;
}

.mega-intro h3 {

    font-size: 22px;

    margin-bottom: 12px;
}

.mega-intro p {

    color: var(--muted);

    font-size: 14px;

    line-height: 1.6;
}

.mega-links {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 0 35px;
}

.mega-link {

    min-height: 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid #e5e5e5;

    color: #111;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;
}

.mega-link2 {

    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid #e5e5e5;

    color: #111;

    text-decoration: none;

    font-size: 14px;

    font-weight: 400;
}

.mega-link span {

    color: var(--red);

    font-size: 20px;

    transition: .2s;
}

.mega-link:hover {
    color: var(--red);
}

.mega-link:hover span {
    transform: translateX(5px);
}

.mega-link2 span {

    color: var(--red);

    font-size: 20px;

    transition: .2s;
}

.mega-link2:hover {
    color: var(--red);
}

.mega-link2:hover span {
    transform: translateX(5px);
}



/* =========================================================
   SOCIAL MEDIA
   ========================================================= */

.social-links {

    margin-left: 22px;

    display: flex;

    align-items: center;

    gap: 8px;
}

.social-links a {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    text-decoration: none;

    border: 1px solid rgba(255,255,255,.50);

    border-radius: 50%;

    font-size: 13px;

    font-weight: 700;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.social-links a:hover {

    background: white;

    color: #111;

    border-color: white;

    transform: translateY(-2px);
}


/* =========================================================
   MOBILE BUTTON
   ========================================================= */

.actions {

    display: flex;

    align-items: center;

    margin-left: 15px;
}

.mobile-toggle {

    display: none;

    width: 48px;

    height: 48px;

    border: 0;

    background: transparent;

    color: white;

    cursor: pointer;

    font-size: 25px;
}

.mobile-toggle:hover {
    background: rgba(255,255,255,.15);
}


/* =========================================================
   HERO SLIDER
   ========================================================= */

.hero-slider {

    position: relative;

    height: 100vh;

    min-height: 680px;

    overflow: hidden;

    background: #050505;

    color: white;
}


/* =========================================================
   HERO SLIDES
   ========================================================= */

.hero-slide {

    position: absolute;

    inset: 0;

    background-image:
        var(--overlay),
        var(--image);

    background-size: cover;

    background-position: center center;

    display: flex;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transform: scale(1.04);

    transition:
        opacity .8s ease,
        transform 1.4s ease,
        visibility .8s;
}

.hero-slide.active {

    opacity: 1;

    visibility: visible;

    transform: scale(1);
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-content {

    position: relative;

    z-index: 5;

    max-width: var(--max);

    width: 100%;

    min-height: 100vh;

    margin: auto;

    padding:
        110px 60px 150px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.eyebrow {

    color: #78d0ff;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 22px;
}

.hero-slide h1 {

    max-width: 800px;

    font-size:
        clamp(45px, 6vw, 78px);

    line-height: .98;

    letter-spacing: -2px;

    margin-bottom: 25px;
}

.hero-slide p {

    max-width: 630px;

    color: #eee;

    font-size: 19px;

    line-height: 1.6;

    margin-bottom: 35px;
}


/* =========================================================
   HERO BUTTON
   ========================================================= */

.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    width: fit-content;

    min-height: 52px;

    padding: 0 25px;

    background: var(--red);

    color: white;

    text-decoration: none;

    font-weight: 700;

    transition: .2s;
}

.hero-button span {

    font-size: 20px;

    transition: .2s;
}

.hero-button:hover {

    background: #bd102d;
}

.hero-button:hover span {

    transform: translateX(5px);
}


/* =========================================================
   SLIDER CONTROLS
   ========================================================= */

.slider-controls {

    position: absolute;

    z-index: 20;

    left: 60px;

    bottom: 36px;

    display: flex;

    align-items: center;

    gap: 12px;
}

.slider-arrow,
.slider-play {

    width: 44px;

    height: 44px;

    border: 1px solid
        rgba(255,255,255,.55);

    background:
        rgba(0,0,0,.35);

    color: white;

    cursor: pointer;

    font-size: 17px;

    transition: .2s;
}

.slider-arrow:hover,
.slider-play:hover {

    background: white;

    color: black;
}

.slider-progress {

    display: flex;

    gap: 7px;
}

.slider-dot {

    position: relative;

    width: 70px;

    height: 4px;

    padding: 0;

    border: 0;

    background:
        rgba(255,255,255,.35);

    overflow: hidden;

    cursor: pointer;
}

.slider-dot span {

    position: absolute;

    inset: 0;

    width: 0;

    background: white;
}

.slider-dot.active span {

    animation:
        progress 6s linear forwards;
}

@keyframes progress {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}


/* =========================================================
   DOWN ARROW
   ========================================================= */

.hero-down-arrow {

    position: absolute;

    left: 50%;

    bottom: 28px;

    z-index: 30;

    width: 48px;

    height: 48px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    text-decoration: none;

    border:
        1px solid rgba(255,255,255,.75);

    border-radius: 50%;

    background:
        rgba(0,0,0,.20);

    backdrop-filter:
        blur(3px);

    font-size: 22px;

    line-height: 1;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;

    animation:
        heroArrowBounce 1.8s ease-in-out infinite;
}

.hero-down-arrow:hover {

    background: white;

    color: #111;

    border-color: white;

    animation-play-state: paused;
}

@keyframes heroArrowBounce {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(7px);
    }
}


/* =========================================================
   CONTENT
   ========================================================= */

.content {

    max-width: var(--max);

    margin: auto;

    padding: 80px 32px;
}

.section-title {

    font-size: 38px;

    margin-bottom: 40px;
}

.cards {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;
}

.card {

    min-height: 220px;

    padding: 30px;

    border: 1px solid var(--border);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.10);
}

.card small {

    color: var(--red);

    font-weight: 700;

    text-transform: uppercase;
}

.card h3 {

    margin: 15px 0;

    font-size: 23px;
}

.card p {

    color: var(--muted);

    line-height: 1.6;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu {

    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .logo {
        width: 160px;
    }

    .nav {
        margin-left: 20px;
    }

    .nav-link {

        padding:
            0 10px;

        font-size: 13px;
    }

    .social-links {

        margin-left: 10px;

        gap: 5px;
    }

    .social-links a {

        width: 30px;

        height: 30px;

        font-size: 11px;
    }
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 900px) {

    .header {

        height: 70px;

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        background: transparent;
    }

    .header-inner {

        padding:
            0 20px;
    }

    .logo {

        width: auto;

        font-size: 21px;
    }

    .nav {

        display: none;
    }

    .social-links {

        display: none;
    }

    .actions {

        margin-left: auto;
    }

    .mobile-toggle {

        display: block;
    }


    /* =========================
       MOBILE MENU
       ========================= */

    .mobile-menu {

        position: fixed;

        top: 70px;

        right: 0;

        width:
            min(420px, 100%);

        height:
            calc(100vh - 70px);

        display: block;

        background: #050505;

        transform:
            translateX(100%);

        transition: .3s;

        overflow-y: auto;

        z-index: 2000;
    }

    .mobile-menu.active {

        transform:
            translateX(0);
    }

    .mobile-item {

        border-bottom:
            1px solid #333;
    }

    .mobile-link {

        width: 100%;

        padding: 20px;

        display: flex;

        justify-content:
            space-between;

        color: white;

        text-decoration: none;

        font-weight: 600;
    }

    .mobile-submenu {

        display: none;

        background: #151515;
    }

    .mobile-item.active
    .mobile-submenu {

        display: block;
    }

    .mobile-submenu a {

        display: block;

        padding:
            15px 25px;

        color: #ddd;

        text-decoration: none;

        border-top:
            1px solid #292929;
    }


    /* =========================
       MOBILE HERO
       ========================= */

    .hero-slider {

        height: 88vh;

        min-height: 620px;
    }

    .hero-content {

        min-height: 88vh;

        padding:
            100px 25px 130px;
    }

    .hero-slide h1 {

        font-size: 48px;

        letter-spacing: -1px;
    }

    .hero-slide p {

        font-size: 17px;
    }

    .slider-controls {

        left: 25px;

        right: 25px;

        bottom: 28px;
    }

    .slider-dot {

        width: 45px;
    }

    .hero-down-arrow {

        bottom: 82px;

        width: 44px;

        height: 44px;

        font-size: 20px;
    }

    .cards {

        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .hero-slider {

        height: 82vh;

        min-height: 600px;
    }

    .hero-slide {

        background-position:
            65% center;
    }

    .hero-content {

        min-height: 82vh;

        padding:
            90px 22px 120px;
    }

    .hero-slide h1 {

        font-size: 43px;
    }

    .hero-slide p {

        font-size: 16px;
    }

    .slider-arrow {

        width: 38px;

        height: 38px;
    }

    .slider-play {

        width: 38px;

        height: 38px;
    }

    .slider-dot {

        width: 35px;
    }

    .content {

        padding:
            60px 22px;
    }
}

/* =========================================================
   ZWEALOGO — FULL HEADER HOVER / EXXONMOBIL-STYLE BEHAVIOR
   The entire header changes together when a main menu item
   is hovered, including logo, navigation and social icons.
   ========================================================= */
.header {
    transition: background-color .22s ease, color .22s ease;
}

/* Entire header becomes white when a main menu item is active */
.header.menu-active {
    background: #fff !important;
    color: #111;
}

/* Main navigation becomes dark on the white header */
.header.menu-active .nav-link {
    color: #111;
}

.header.menu-active .nav-link:hover,
.header.menu-active .nav-item:hover > .nav-link,
.header.menu-active .nav-item.open > .nav-link {
    background: #fff;
    color: #111;
}

/* Social icons switch from white to dark */
.header.menu-active .social-link {
    color: #111 !important;
    border-color: #111 !important;
}

.header.menu-active .social-link:hover {
    background: #111 !important;
    color: #fff !important;
}

/* Keep the selected navigation area visually connected to the mega menu */
.nav-item:hover > .nav-link,
.nav-item.open > .nav-link {
    background: #fff;
    color: #111;
}

/* Mega menu sits directly below the full white header */
.mega {
    top: 82px !important;
    margin-top: 0 !important;
    background: #fff;
    color: #111;
    border-top: 0;
    z-index: 1000;
}

.nav-item:hover .mega,
.nav-item.open .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Small white bridge so there is no visible gap */
.nav-item:hover::after,
.nav-item.open::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 82px;
    height: 12px;
    background: #fff;
    z-index: 1001;
}

/* Make the header contents transition together */
.header .logo,
.header .nav-link,
.header .social-link {
    transition: color .22s ease, background-color .22s ease, border-color .22s ease;
}

/* =========================================================
   TOP RED INDICATOR — MAIN MENU HOVER
   ========================================================= */
.header .nav-link {
    border-top: 4px solid transparent !important;
    border-bottom: none !important;
    box-sizing: border-box;
}

.header .nav-item:hover > .nav-link,
.header .nav-item.open > .nav-link {
    border-top: 4px solid var(--red) !important;
    box-shadow: none !important;
}

/* Keep the red line visible even while the complete header is white. */
.header.menu-active .nav-item:hover > .nav-link,
.header.menu-active .nav-item.open > .nav-link {
    border-top: 4px solid var(--red) !important;
}

/* =========================================================
   ZWEALOGO NAVIGATION — CHANGE ONLY HOVERED MENU TEXT TO GOLD
   Preserve the existing ExxonMobil-style header, background,
   social icons, mega menu, and red top indicator.
   ========================================================= */
.header:hover .nav-item:hover > .nav-link,
.header.menu-active .nav-item:hover > .nav-link,
.header .nav-item:hover > .nav-link,
.header .nav-item.open > .nav-link {
    color: #f5b400 !important;
}

.header:hover .nav-item:hover > .nav-link .chevron,
.header.menu-active .nav-item:hover > .nav-link .chevron,
.header .nav-item:hover > .nav-link .chevron,
.header .nav-item.open > .nav-link .chevron {
    color: #f5b400 !important;
}